<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<meta charset="utf-8">
<head>
    <title>用户登录页</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<style>
    .container{
        margin-top: 10%;
    }
</style>

<body>

<div class="container">
    <h3 class="text-center">添加书籍</h3>
    <form class="form-horizontal">
        <div class="form-group">
            <label for="book_name" class="col-sm-2 control-label">书名</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="book_name" placeholder="书名">
            </div>
        </div>
        <div class="form-group">
            <label for="author_name" class="col-sm-2 control-label">作者名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="author_name" placeholder="作者名" />
            </div>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="command" id="command" value="0" checked> 新增作者
            </label>
            <label>
                <input type="radio" name="command" id="command" value="1" checked> 选择作者
            </label>
        </div>
        <div class="form-group">
            <label>选择作者</label>
            <select class="form-control" id="author_list">
                <c:forEach items="${authorList}" var="item">
                    <option value="${item.id}">
                        <c:out value="${item.chName}"/>
                    </option>
                </c:forEach>
            </select>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" id="add_btn">添加</button>
            </div>
        </div>

    </form>
</div>
</body>
</html>
<script>
    $(function () {
        $("#add_btn").click(function () {
            let command = $("input[type='radio']:checked").val();
            let book = {};
            let author = {};
            book.name = $("#book_name").val();
            if(command==="0"){
                author.name = $("#author_name").val();
            }else{
                author.name = $("#author_list option:selected").html();
                author.id = $("#author_list option:selected").val();
            }
            console.log(author.name);
            book.author = author;
            $.ajax({
                url:"http://localhost:8888"+"${pageContext.request.contextPath}"+"/book/add",
                type:"post",
                data:JSON.stringify(book),
                processData:false,
                contentType:"application/json",
                dataType: "json",
                success:function(res){
                    console.log(res);
                }
            });
        });
    });
</script>
